{% extends "base.html" %}{% load i18n %}
{% load pagination_tags %}

{% block content %}
    <div class="container">
        <div class="page-header">
            <h3>
                <i class="icon-desktop icon-2x pull-left icon-muted"></i>
                {{ project.name }}
                <a class="pull-right" href="{% url 'explore' project.name %}"><i class="icon-th-large"></i> {%trans "Explore" %}</a>
            </h3>
            <p class="muted" style="padding-left: 70px">{{ project.description }}</p>


        </div>
        <div class="row">
            <div class="span3">
                <div class="well sidebar-nav">
                    <header>
                    <h5>{% trans "Ansible Resources" %} <a class="pull-right" href="{% url 'explore' project.name %}"><i class="icon-th-large"></i></a></h5>
                    </header>
                    <ul class="nav nav-list">
                        <li class="nav-header">Inventories</li>
                        {% for item in project.available_inventories %}
                            <li><a href="{% url 'view_file' project_name=project.name path=item type='inventory' %}">{{ item }}</a></li>
                        {% endfor %}
                        <li class="nav-header">Playbooks</li>
                        {% for item in project.available_playbooks %}
                            <li><a href="{% url 'view_file' project_name=project.name path=item type='playbook'%}" role="leaf" id="nut">{{ item }}</a></li>
                        {% endfor %}
                        <li class="nav-header">Vars</li>
                        {% for item in project.available_varfiles %}
                            <li><a href="{% url 'view_file' project_name=project.name path=item type='vars'%}" role="leaf" id="nut">{{ item }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="span9">
                <div class="well well-small">
                    <header>
                    <h5>{% trans "Execute Command" %}</h5>
                    </header>
                    <div class="row-fluid">
                       <div class="span3">
                        <a href="{% url 'execute_playbook' project.name %}" class="btn btn-primary">{% trans "Execute Job" %}</a>
                        <a href="#" id="playbooktip" class="btn btn-info btn-mini" rel="popover" data-placement="bottom" data-content="通过playbooks中的yml文件，生成任务" title="Note" ><i class="icon-question-sign"></i></a>
                       </div>
                       <div class="span3">
                        <a href="{% url 'execute_script' project.name %}" class="btn btn-primary">{% trans "Execute Script" %}</a>
                       </div>
                       <div class="span3">
                        <a href="{% url 'execute_scp' project.name %}" class="btn btn-primary">{% trans "Execute Scp" %}</a>
                       </div>
                    </div>
                </div>

                <!-- common management -->
                <div class="well well-small">
                    <header>
                    <h5>{% trans "Common Management" %}</h5>
                    </header>
                    <div class="row-fluid">
                      <div class="span3">
                        <a href="#hostmgtModal" role="botton" class="btn btn-primary" data-toggle="modal">{% trans "Host Management" %}</a>
                        <a href="#" id="hostmgttip" class="btn btn-info btn-mini" rel="popover" data-placement="bottom" data-content="[test]<br/>10.204.8.228<br/><br/>[product]<br/>10.200.10.10<br/><br/>[all:children]<br/>test<br/>product<br/>" title="Example" ><i class="icon-question-sign"></i></a>
                      </div>

                      <div class="span3">
                        <a href="{% url 'explore' project.name %}" role="botton" class="btn btn-primary">{% trans "Data Management" %}</a>
                        <a href="#" id="datamgttip" class="btn btn-info btn-mini" rel="popover" data-placement="bottom" data-content="数据包含playbooks(任务)、packages(程序包，仅供ci平台使用)、data(用户自定义文件)、vars(全量变量)四类" title="Note" ><i class="icon-question-sign"></i></a>
                      </div>

                       <div class="span3">
                        <a href="{% url 'schedule' project.name %}" class="btn btn-primary">{% trans "Manage Schedule" %}</a>
                        <a href="#" id="schedulemgttip" class="btn btn-info btn-mini" rel="popover" data-placement="bottom" data-content="管理预约执行的任务，执行查看和删除操作" title="Note" ><i class="icon-question-sign"></i></a>
                       </div>

                      <div class="span3">
                        <a href="{% url 'deploykey' project.name %}" class="btn btn-primary">{% trans "Deploy SSHKey" %}</a>
                        <a href="#" id="deploykeytip" class="btn btn-info btn-mini" rel="popover" data-placement="bottom" data-content="部署免检权密钥到客户机，以使系统可以正常访问客户机" title="Note" ><i class="icon-question-sign"></i></a>
                      </div>
                    </div>
                </div>

               <!-- hostmgtModal -->
                <form id="frmHostmgt" class="form-horizontal" action="{{ action }}" method="post">
                {% csrf_token %}
                <div id="hostmgtModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="hostmgtModalLabel" aria-hidden="true" style="position:relative; top:auto; width:400px; height:500px;max-width:100%; max-height:100%">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                        <h3 id="hostmgtModalLabel">{% trans "Host Management" %}</h3>
                    </div>
                    <div class="modal-body">
                         <textarea name="hostcontent" style="width:335px; height:350px">{{ hostcontent }}</textarea>
                    </div>
                    <div class="modal-footer">
                         <button id="hostmgtsave" class="btn btn-primary">{% trans "Save" %}</button>
                         <button class="btn" data-dismiss="modal" aria-hidden="true">{% trans "Close" %}</button>
                    </div>
                </div>
                </form>
                
                
               <!-- packagemgtModal -->
               <div id="packagemgtModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="packagemgtModalLabel" aria-hidden="true" style="width:1120px; height:auto">
                    <div class="modal-body">
                      <div id="elfinder-package"></div>
                    </div>
               </div>

               <!-- datamgtModal -->
               <div id="datamgtModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="datamgtModalLabel" aria-hidden="true" style="width:1120px; height:auto">
                    <div class="modal-body">
                      <div id="elfinder-data"></div>
                    </div>
               </div>

                <!-- job template & job logs -->
                <div class="box">
                    <ul class="nav nav-tabs">
                        <li class="active">
                        <a href="{% url 'view_project' project.name %}">{% trans "Job Template" %}</a>
                        </li>
                        <li>
                        <a href="{% url 'view_project_logs' project.name %}">{% trans "Job Log" %}</a>
                        </li>

                    </ul>
                    <table class="table table-striped table-condensed">
                        <thead>
                        <tr>
                            <th>{% trans "Template Name" %}</th>
                            <th>{% trans "Created User" %}</th>
                            <th>{% trans "Created Date" %}</th>
                            <th>{% trans "Operation" %}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% autopaginate templates 25 %}
                        {% for item in templates %}
                            <tr id="tr{{ item.pk }}" class="tableRow">
                                <td><a href="{% url 'execute_playbook_template' project.name item.pk %}">{{ item.name }}</a></td>
                                <td>{{ item.created_by }}</td>
                                <td>{{ item.creation_date}}</td>
                                <td><a href="javascript:void(0)" onclick="delete_template('{% url 'delete_template' project.name %}',{{ item.pk }})"><i class="icon-trash"></i> {% trans "Delete" %}</a></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    {% paginate %}
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function delete_template(url,pk){
            if(confirm("are you sure to delete ?")){
                jQuery.get(
                        url,
                        {template_pk:pk},
                        function(data){
                    if(data=true){
                        $("#tr"+pk).hide('slow',function(){
                            $(this).remove()
                        })
                    }
                })
            }
        }
    </script>
<script>
$(function () {
    $('#hostmgttip').popover();
    $('#packagemgttip').popover();
    $('#datamgttip').popover();
    $('#playbooktip').popover();
    $('#deploykeytip').popover();
    $('#schedulemgttip').popover();
});
</script>
    <!-- jQuery and jQuery UI (REQUIRED) -->
    <link rel="stylesheet" type="text/css" media="screen" href="/static/ext/css/jquery-ui.css">

    <!-- elFinder CSS (REQUIRED) -->
    <link rel="stylesheet" type="text/css" media="screen" href="/static/ext/css/elfinder.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/static/ext/css/elfinder.theme.css">

    <!-- elFinder JS (REQUIRED) -->
    <script type="text/javascript" src="/static/ext/elfinder/js/elfinder.min.js"></script>
    <script type="text/javascript" src="/static/ext/elfinder/js/i18n/elfinder.zh_CN.js"></script>

    <script type="text/javascript" charset="utf-8">
        $().ready(function() {
            $('#elfinder-package').elfinder({
                url : '{% url 'ElfinderConnector' project_name=project.name optionset='default' start_path='packages' %}',  // connector URL (REQUIRED)
                lang : 'zh_CN',
            }).elfinder('instance');
            $('#elfinder-data').elfinder({
                url : '{% url 'ElfinderConnector' project_name=project.name optionset='default' start_path='data' %}',  // connector URL (REQUIRED)
                lang : 'zh_CN',
            }).elfinder('instance');
        });
    </script>

{% endblock %}
